<template>
  <div ref="funnelChart" :style="{ width: '100%', height: '100%'}"></div>
</template>

<script>
export default {
	props: {
		seriesData: {
			type: Array,
			default(){
				return []
			}
		}
	},
  name: "funnel",
  data() {
    return {
      funnelChart: '',
			options: ''
    }
  },
	watch: {
		allLatlngs: {
			handler(val){
				this.$nextTick(() => {
					if(this.funnelChart){
						this.options.series[0].data = this.seriesData
						this.options.series[1].data = this.seriesData
						this.funnelChart.setOption(this.options)
					}
				})
			},
			immediate: true
		},
	},
	computed: {
		allLatlngs () {
			const { seriesData } = this
			return {
				seriesData
			}
		}
	},
  methods: {
    init() {
      this.funnelChart = this.$echarts.init(this.$refs.funnelChart);
      this.funnelChart.resize();
			this.options = {
				color: ['#F47829','#F7AD35','#B4C63E','#00f3fc','#3785C8','#35AFE3','#8BC1B6','#6E91B5','#9D8D8B','#58596D'],
				series : [{
					name:'模型漏斗',
					type:'funnel',
					x: '10%',
					y: 20,
					y2: 20,
					width: '60%',
					min: 0,
					max: 100,
					minSize: '0%',
					maxSize: '100%',
					sort : 'descending', // 'ascending', 'descending'
					gap :0,
					data: [], // this.seriesData.sort(function (a, b) { return a.value - b.value})
					roseType: true,
					label: {
						normal: {
							length: 10,
							position: 'outside',
							z: 10,
							lineHeight:8
						}
					},
					labelLine: {
						show: true,
						length: 50,
					},
					itemStyle: {
						opacity: .5,
						normal: {
							borderWidth: 0,
							shadowBlur: 30,
							shadowOffsetX: 0,
							shadowOffsetY: 10,
							shadowColor: 'rgba(0, 0, 0, 0.2)'
						}
					}
				},{
					name:'模型漏斗',
					type:'funnel',
					x: '10%',
					y: 20,
					y2: 20,
					width: '60%',
					min: 0,
					max: 100,
					minSize: '0%',
					maxSize: '100%',
					sort : 'descending', // 'ascending', 'descending'
					gap :0,
					data: [], // this.seriesData.sort(function (a, b) { return a.value - b.value})
					roseType: true,
					label: {
						normal: {
							formatter: function(e){
								return ('第'+(e.dataIndex+1)+'层 \n\n'+ '总数：' + e['data'].allCount + '人 \n\n' +e['data'].percentCustom+'%')
							},
							fontSize: 14,
							position: 'inside'
						}
					},
					labelLine: {
						show: true,
						length: 10,
					},
					itemStyle: {
						opacity: 1,
						normal: {
							borderWidth: 0,
							shadowBlur: 30,
							shadowOffsetX: 0,
							shadowOffsetY: 10,
							shadowColor: 'rgba(0, 0, 0, 0.2)'
						}
					},
					z: 100
				}]
			}
    }
  },
  mounted() {
		this.init()
  },
};
</script>